<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
			
		</canvas>
	</body>
	<script type="text/javascript">
		var convas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		
		function draw(){
//			context.strokeStyle="red";
//			context.lineWidth = 3;
//			
//			context.strokeRect(0,0,200,200);
//			
//			context.beginPath();
//			
//			context.moveTo(0,200);
//			context.lineTo(200,0)
//	
//			context.stroke();
//			
//			context.save();//保存当前状态
//			
//			context.translate(100,100);//移动坐标点
//			
//			context.beginPath();
//			
//			context.moveTo(-100,-100);
//			context.lineTo(100,100);
//			context.stroke();
//			
//			context.restore();//还原坐标
			context.strokeStyle = "red";
			context.lineWidth = 2;
			context.strokeRect(0,0,500,500);
			context.save();
			
			for (i=0;i<10;i++) {
				context.translate(10,10);
				context.strokeRect(0+(i+1)*10,0+(i+1)*10,500-(i+1)*40,500-(i+1)*40);
			}
			context.restore();
			
		}
		
		window.addEventListener("load",draw,true);
	</script>
</html>
